{% extends "common/panel.html" %}
{% block title %}{{title}}{% endblock %}
{% block panel %}
<script type="text/javascript" charset="utf-8">
    madrona.onShow(function(){
        madrona.setupForm($('#featureform'));
        
        //categories_list = [ 'energy', 'conservation', 'fisheries', 'development' ];
        
        //currently ordered the same as on the form 
        objectives_list = [ 'tidal_energy', 'wave_energy', 'wind_energy', 'offshore_conservation', 'nearshore_conservation', 'pelagic_conservation', 'offshore_fishing', 'shellfish_aquaculture', 'shoreside_development' ];
        objectives_dict = { 'energy': ['tidal_energy', 'wave_energy', 'wind_energy'],
                            'conservation': ['offshore_conservation', 'nearshore_conservation', 'pelagic_conservation'] };
                            //'fisheries': ['offshore_fishing', 'shellfish_aquaculture'], 
                            //'development': ['shoreside_development'] };
                            
        //parameters_dict parameters ordering needs to match the ordering found in each <objective>parameter table in the db                     
        parameters_list = [ 'distance_shore', 'distance_port', 'distance_astoria', 'distance_hoquium', 'depth', 'substrate', 'wind_potential', 'tidalmean', 'tidalmax', 'wavesummer', 'wavewinter', 'depth_class', 'geomorphology', 'exposure', 'ecosystem', 'upwelling', 'chlorophyl'];
        parameters_dict = { 'tidal_energy': ['distance_shore', 'distance_port', 'depth', 'substrate', 'tidalmean', 'tidalmax', 'distance_astoria', 'distance_hoquium'],
                            'wave_energy': ['distance_shore', 'distance_port', 'depth', 'substrate', 'wavesummer', 'wavewinter', 'distance_astoria', 'distance_hoquium'],
                            'wind_energy': ['distance_shore', 'distance_port', 'depth', 'substrate', 'wind_potential', 'distance_astoria', 'distance_hoquium'],
                            'offshore_conservation': ['substrate', 'depth_class', 'geomorphology'],
                            'nearshore_conservation': ['substrate', 'exposure', 'ecosystem'],
                            'pelagic_conservation': ['upwelling', 'chlorophyl'] };
                            //'offshore_fishing': ['distance_port', 'depth', 'substrate'],
                            //'shellfish_aquaculture': ['distance_shore', 'depth', 'substrate'],
                            //'shoreside_development': ['distance_shore'] };
        
        var step = 1;
        var max_step = 4;
        var first_next = true;
        var is_edit = !(!$('#id_name').val());
        
        //var initial_categories = [];
        //var selected_categories = [];
        
        var initial_objectives = {};
        var selected_objectives = {};
        
        /*
        var all_cats = $('input.categories');
        $.each(all_cats, function(index, cat) {
            if (cat.checked) {
                selected_categories.push(categories_list[cat.value-1]);
            }
        });
        initial_categories = selected_categories;
        */
        
        //get initially selected objectives -- might only need to do this when editing...?
        selected_objectives = get_selected_objectives();
        initial_objectives = selected_objectives;
        
        var initial_params = {};
        var selected_params = {};
        if (is_edit) {
            //console.log('is edit');
            var params = $('input.parameters');  
            
            $.each(selected_objectives, function(key, value) {
                //console.log('key='+key);
                //console.log('value='+value);
                $.each(value, function(index, obj) {
                    //console.log('class=parameters_'+obj);
                    var obj_params = $('input.parameters_'+obj);
                    param_list = []
                    $.each(obj_params, function(index, param) { 
                        //console.log(param);
                        if (param.checked) {
                            //console.log(param.name + ' is checked');
                            //NOTE:  The following relies on db table pk's starting at 1 
                            param_list.push(parameters_dict[obj][param.value-1]);
                        }
                    });
                    selected_params[obj] = param_list;
                });
            });
            $.each(selected_params, function(index, param) {
                //console.log('selected_params = ' + param);
            });
        }
        
        function get_selected_objectives() {
            var selected_energy_objectives = [];
            var energy_objectives = $('input.energy_objectives');
            $.each(energy_objectives, function(index, obj) {
                if (obj.checked) {                
                    selected_energy_objectives.push(objectives_dict['energy'][obj.value-1]);
                }
            });
            selected_objectives['energy'] = selected_energy_objectives;
            
            var selected_conservation_objectives = [];
            var conservation_objectives = $('input.conservation_objectives');
            $.each(conservation_objectives, function(index, obj) {
                if (obj.checked) {
                    selected_conservation_objectives.push(objectives_dict['conservation'][obj.value-1]);
                }
            });
            selected_objectives['conservation'] = selected_conservation_objectives;
            /*
            var selected_development_objectives = [];
            var development_objectives = $('input.development_objectives');
            $.each(development_objectives, function(index, obj) {
                if (obj.checked) {
                    selected_development_objectives.push(objectives_dict['development'][obj.value-1]);
                }
            });
            selected_objectives['development'] = selected_development_objectives;
            
            var selected_fisheries_objectives = [];
            var fisheries_objectives = $('input.fisheries_objectives');
            $.each(fisheries_objectives, function(index, obj) {
                if (obj.checked) {
                    selected_fisheries_objectives.push(objectives_dict['fisheries'][obj.value-1]);
                }
            });
            selected_objectives['fisheries'] = selected_fisheries_objectives;
            */
            return selected_objectives;
        };
        
        function get_selected_params() {
            var selected_params = {};
            //console.log('Entering get_selected_params...');
            $.each(selected_objectives, function(key, value) {
                //console.log('selected category: ' + key);
                //console.log('selected objective: ' + value);
                $.each(value, function(index, obj) {
                    var obj_params = $('input.parameters_'+obj);
                    param_list = []
                    $.each(obj_params, function(index, param) {
                        //console.log('objective parameter: ' + param.name);
                        if (param.checked) {
                            //console.log(param.name + ' is checked');
                            //console.log('pushing ' + obj + ' ' + param.value + ' from parameters_dict');
                            param_list.push(parameters_dict[obj][param.value-1]);
                        }
                    });
                    selected_params[obj] = param_list;
                });
            });
            //console.log('Leaving get_selected_params...');
            //$.each(selected_params, function(obj, param_list) {
                //console.log('returning ' + param_list + ' from get_selected_params');
            //});
            return selected_params;
        };
        
        function identical(list1, list2) {
            if (list1.length != list2.length) {
                return false;
            }
            var a = list1.sort();
            var b = list2.sort();
            for (var i = 0; i < a.length; i++) {
                if (a[i] != b[i]) {
                    return false;
                }
            }
            return true;
        };
        
        function validate(step) {
            return_value = true;
            if (step == 1) {
                selected_objectives = get_selected_objectives();
                //console.log(selected_objectives);
                //if (selected_objectives['energy'].length == 0 && selected_objectives['conservation'].length == 0 && selected_objectives['fisheries'].length == 0 && selected_objectives['development'].length == 0) {
                //TODO use smarter loop here so hard coding of keys is not necessary  
                if (selected_objectives['energy'].length == 0 && selected_objectives['conservation'].length == 0) {
                    alert("Select at least 1 Objective.");
                    return_value = false;
                } 
            } else if (step == 2) {
                selected_params = get_selected_params();               
                $.each(selected_objectives, function(key, obj_list) {
                    //console.log('obj_list: ' + obj_list);
                    $.each(obj_list, function(index, obj) {
                        //console.log('obj: ' + obj);
                        //console.log('selected params [obj]: ' + selected_params[obj]);
                        if (selected_params[obj].length == 0) {
                            alert("Select at least 1 Parameter for each Objective.");
                            return_value = false;
                            return;
                        }
                    });
                });
            } else if (step == 3) {
                //console.log('validating step 3 with next...');
                selected_params = get_selected_params();              
                $.each(selected_objectives, function(key, obj_list) {
                    //console.log('obj_list: ' + obj_list);
                    $.each(obj_list, function(index, obj) {
                        //console.log('obj: ' + obj);
                        //console.log('selected params [obj]: ' + selected_params[obj]);
                        $.each(selected_params[obj], function(index, param) {
                            //console.log('param: ' + param);
                            checkboxes = $('input.'+obj+'_'+param+'_checkboxes');
                            //console.log('checkboxes length: ' + checkboxes.length);
                            checked = checkboxes.serializeArray();
                            //console.log('checked boxes: ' + checked);
                            if(checkboxes.length > 0 && checked.length == 0) {
                                if(return_value) {
                                    return_value = false;
                                    alert("Make sure each parameter has been assigned a value.");
                                }
                            }
                        });
                    });
                });
            } else if (step == 4) {
                name = $('#id_name')
                //console.log(name);
                alert(name);
                //alert("Please provide a name for your Scenario.");
                return false;
            }
            return return_value;
        }; 

        function wizard(action) {
            if (step == 1 && action == 'next') {
                if (validate(step)) {
                    step += 1;
                    $.each(objectives_dict, function(key, value) {
                        $.each(value, function(index, val) {
                            $('#'+val+'_params_header').hide();
                            $('#'+val+'_params').hide();
                        });
                    });
                    $.each(selected_objectives, function(key, value) {
                        $.each(value, function(index, obj) {
                            //console.log(obj);
                            $('#'+obj+'_params_header').show();
                            $('#'+obj+'_params').show();
                            $.each($('input.parameters_'+obj), function() {
                                if ( !(obj in selected_params) || ($.inArray(parameters_dict[$(this).value-1], selected_params[obj]) > -1) ) {
                                    $(this).attr("checked", "checked");
                                }
                            });
                        });
                    });
                    first_next = false;
                    initial_objectives = selected_objectives;
                }
            } else if (step ==2 && action == 'prev') {
                step -= 1;
                selected_params = get_selected_params();
                initial_params = selected_params;
            } else if (step == 2 && action == 'next') {
                validated = validate(step);
                //console.log(validated);
                if (validated) {
                    step += 1;
                    selected_params = get_selected_params();
                    /*
                    $.post('/scenario/form/post-params', {'selected_params': selected_params, 'selected_objectives': selected_objectives}, function(data) {
                        $('#step3_data').html(data);
                    });
                    */
                    //hide all widgets and widget headers in step 3
                    $.each(objectives_list, function(index, obj) {
                        //console.log('obj is: ' + '#'+obj+'_widgets_header');
                        $('#'+obj+'_widgets_header').hide();
                        $.each(parameters_list, function(index, param) {
                            //console.log('param is: ' + '#'+param+'_'+obj+'_widget');
                            $('#'+param+'_'+obj+'_widget').hide();
                        });
                    });
                    //show only those widgets and widget headers that have been selected by the user
                    $.each(selected_params, function(obj, param_list) {
                        $('#'+obj+'_widgets_header').show();
                        //console.log('showing ' + param_list);
                        $(param_list).each( function(index, param) {
                            //console.log('showing #'+param+'_'+obj);
                            $('#'+param+'_'+obj+'_widget').show();
                        });
                    });
                }
            } else if (step == 3 && action == 'next') {
                validated = validate(step);
                if (validated) {
                    step += 1;
                }
            //} else if (step == 4 && action == 'submit') {
            //    validated = validate(step);
            //    if (!validated) {
            //        validate(step);
            //    }
            } else if (step < max_step && action == 'next') {
                step += 1;
            } else if (step > 1 && action == 'prev') {
                step -= 1;
            }
            $('div.step').each(function(index) {
                $(this).hide();
            });
            $('div#step' + step).show();

            if (step == 1) {
                $('#button_prev').hide();
            } else {
                $('#button_prev').show();
            }

            if (step == max_step) {
                $('#button_next').hide();
                $('.submit_button').show();
            } else {
                $('#button_next').show();
                $('.submit_button').hide();
            }
        };
        
        $('#button_prev').click( function() { wizard('prev'); });
        $('#button_next').click( function() { wizard('next'); });
        //$('.submit_button').click( function() { wizard('submit'); });
        wizard();
        
        $('ul.errorlist').each( function() {
                $('div#error_bar').html("<ul class='errorlist'><li>We encountered an error while processing your scenarios. Please ensure all required elements have been completed.</li></ul>");
        });
        
        
        $('#check_all').click(function(event) {
            $('input.parameters').each( function() { $(this).attr('checked', 'checked'); });
        });
        $('#uncheck_all').click(function(event) {
            $('input.parameters').each( function() { $(this).removeAttr('checked'); });
        });     
    
        $('img.info').each( function() {
            var id = $(this).attr('id');
            var text = "none";
            topMiddle = false;
            topLeft = false;
            topRight = false;
            switch(id) {
            
                //Step 1 Categories
                case 'info_energy_objs':
                    text  = "The renewable energy scenario is designed to identify suitable areas for renewable ocean energy (tidal, wave, wind) using input parameters including sediment type, depth, and power potential. ";
                    text += "<p></p>An additonal step is to optimize industry recommended siting criteria while minimizing conflicts with other ocean uses.";
                    break;
                case 'info_tidal_energy':
                    text  = "The tidal energy objective uses spatial information about the distribution of average and maximum tidal energy potential, depth, substrate bottom types, and distance to shoreline and ports (all ports and deep water ports) to find suitable areas to locate tidal energy facilities off the coast of Washington.";
                    break;
                case 'info_wave_energy':
                    text  = "The wave energy objective uses spatial information about the distribution of winter and summer wave energy potential, depth, substrate bottom types, and distance to shoreline and ports (all ports and deep water ports) to identify areas suitable for wave energy facilities off the coast of Washington.";
                    break;
                case 'info_wind_energy':
                    text  = "The wind energy objective uses spatial information about the distribution of wind power potential, depth, substrate bottom types, and distance to shoreline and ports (all ports and deep water ports) to identify areas suitable for wind energy facilities off the coast of Washington.";
                    break;
                case 'info_conservation_objs':
                    text  = "The marine conservation scenario is designed to help identify areas in the nearshore, seafloor or benthic environment, and in the water column or pelagic areas off the coast of Washington.  Users can use input parameters including habitat, depth, geomorphology, vegetation and exposure to wave energy that are important for proposing conservation areas. ";
                    text += "<p></p>Users can use input parameters of habitat, depth, geomorphology, vegetation, and exposure that are important to create conservation areas. ";
                    break;
                case 'info_offshore_conservation':
                    text  = "The benthic or deep ocean conservation objective uses spatial information about the distribution of depth, bottom sediments, and deep-sea geomorphology (the shape of deep sea floor) to identify areas suitable for conservation of benthic habitats off the coast of Washington.";
                    break;
                case 'info_nearshore_conservation':
                    text  = "The nearshore and estuarine or shallow water conservation objective uses spatial information about the distribution of bottom sediments, ecosystems or vegetation type and wind and wave exposure to identify areas suitable for conservation of estuarine and nearshore habitats near the coast of Washington.";
                    break;
                case 'info_pelagic_conservation':
                    text  = "The pelagic or open ocean conservation objective uses spatial information about the distribution of areas of upwelling and chlorophyll to identify areas suitable for conservation of pelagic areas off the coast of Washington.";
                    break;
                    
                //Step 2 Energy Parameters 
                case 'info_distance_shore':
                    text = "Distance to shore is an important consideration due to cost of laying transmission cables to shore-based sub-stations.";
                    break;
                case 'info_distance_port':
                    text = "Distance to port assumes a cost for source of manufactured parts to maintain and repair the energy facility.";
                    break;
                case 'info_distance_astoria':
                    topMiddle = true;
                    text = "Distance to deep water port assumes a cost for source of manufactured parts to construct the energy facility.";
                    break;
                case 'info_distance_hoquium':
                    topLeft = true;
                    text = "Distance to deep water port assumes a cost for source of manufactured parts to construct the energy facility.";
                    break;
                case 'info_depth':
                    text = "Depth considerations are important for costs of mooring and anchoring to the seafloor; with increased depth comes increased cost.";
                    break;
                case 'info_substrate':
                    text = "Certain substrates are better suited for mooring and anchoring of offshore energy facilities; for example softer substrates are easier to imbed pilings and other anchoring structures.";
                    break;
                case 'info_tidal_substrate':
                    text = "Certain substrates are better suited for mooring and anchoring of offshore energy facilities; for example hard substrates (such as bedrock) are easier to attach tidal facilities to the seafloor.";
                    break;
                case 'info_tidalmean':
                    text = "Mean tidal energy represents the average mean kinetic power density in kilowatts per square meters available for tidal power generation.";
                    break;
                case 'info_tidalmax':
                    text = "Max tidal energy represents the maximum mean kinetic power density in kilowatts per square meters available for tidal power generation.";
                    break;
                case 'info_wavesummer':
                    text = "On the west coast of North America we see seasonal variability of wave power potential; in general summer waves are smaller with less power potential.";
                    break;
                case 'info_wavewinter':
                    text = "On the west coast of North America we see seasonal variability of wave power potential; in general summer waves are larger with more power potential.";
                    break;
                case 'info_wind_potential':
                    text = "These data represent 50-meter height wind power resource estimates  produced by TrueWind Solutions using their MesoMap system and historical weather data.";
                    break;
                    
                //Step 2 Conservation Parameters 
                case 'info_benthic_substrate':
                    text = "Benthic substrate or sediment type is the physical material found on the ocean floor that provides the inherent physical structure for biological life in benthic habitats.";
                    break;
                case 'info_depth_class':
                    text = "Benthic depth is related to habitat structure and important important in defining the conservation value of benthic habitats.";
                    break;
                case 'info_geomorphology':
                    text = "Geomorphology represents seaforms or terrains that define the physical shape of  habitats and the processes that creates them.";
                    break;
                case 'info_nearshore_substrate':
                    text = "Substrate refers to the sea bottom sediment type (i.e. mud) that provides habitat for life found in estuaries and along the coast.";
                    break;
                case 'info_exposure':
                    text = "Wave energy or fetch represents the amount of exposure of the shoreline to prevailing wind, or the distance water can travel continuously without obstruction. The amount of exposure influences what habitat can grow and survive along the coast and in estuaries.";
                    break;
                case 'info_ecosystem':
                    text = "Ecosystem represent the vegetation type within estuaries and along shorelines.";
                    break;
                case 'info_upwelling':
                    text = "Upwelling brings deep, nutrient-rich waters to the surface off Washington's outer coast, generates an enormous amount of primary productivity, and is critical  to sustain the offshore foodweb.";
                    break;
                case 'info_chlorophyl':
                    text = "Chlorophyll - a concentration is an excellent measure of primary productivity in the marine environment and forms the basis of the marine food chain.";
                    break;
                    
                //Step 3 Energy Parameters
                case 'info_dist_shore_step3':
                    topMiddle = true;
                    text = "When specifying distance to shore, consider the cost per mile of underwater transmission cable from offshore energy facilties to onshore substation; cost depends on the capacity of transmission cable used. <br>Dalton et al. (2010) report costs ranging from $800,000-$8,000,000 per mile depending on power output.";
                    break;
                case 'info_dist_port_step3':
                    topMiddle = true;
                    text = "Selection of distance to ports reflects the transportation costs of manufactured facility componenets to offshore installation sites with potential for moorage at an intermediary port. <br><NEED ROUGH ESTIMATES OF TRANS COSTS.>";
                    break;
                case 'info_dist_astoria_step3':
                    topLeft = true;
                    text = "Deep water ports in Astoria and Hoquium serve as launching point for construction materials and equipment for offshore energy facility. Transportation costs may increase with increasing distance from these ports making distant locations less suitable than those close. A default parameter value is 100 miles.";
                    break;
                case 'info_dist_hoquium_step3':
                    topLeft = true;
                    text = "Deep water ports in Astoria and Hoquium serve as launching point for construction materials and equipment for offshore energy facility. Transportation costs may increase with increasing distance from these ports making distant locations less suitable than those close. A default parameter value is 100 miles.";
                    break;
                case 'info_depth_step3':
                    topMiddle = true;
                    text = "Suitable depth ranges from 66-262 ft (20-80 meters); depths less than 66 feet (20 meters) are too shallow and depths greater than 262 feet (80 meters) are too deep (Polagye pers.comm. 2012).";
                    break;
                case 'info_wind_depth_step3':
                    topMiddle = true;
                    text = "For offshore, floating wind facilities depths greater than 197 feet (60 meters) are most suitable while, depths between 98-197 feet (30-60 meters) are suitable and depths less than 98 feet (30 meters) are least suitable (Principle Power, Inc. 2012)";
                    break;
                case 'info_substrate_step3':
                    text = "Selection of substrate type is important to the installation of pilings  and other anchoring structures; softer substrate (organics, mud, sand, gravel, cobble) are easier to anchor mooring structures.";
                    break;
                case 'info_tidal_substrate_step3':
                    topMiddle = true;
                    text = "Selection of substrate type is important to the installation of pilings and other anchoring structures; for tidal facilities bedrock is excellent, consolidated sediments (sand) are good, unconsolidated sediments (mud, shell, boulder, gravel, cobble, over bedrock or consolidated sediments) are fair, and deep unconsolidated sediments are poor (Polagye pers.comm. 2012).";
                    break;
                case 'info_tidalmean_step3':
                    topLeft = true;
                    text = "The guidelines for average mean kinetic power density for economically viable energy production should be followed: less than 0.5 kW/m2 is poor, 0.5 - 1 kW/m2 is fair, 1-2 kW/m2 is good, 2-4 kW/m2 is excellent, and greater than 4 kW/m2 is outstanding  (Polagye pers.comm. 2012).";
                    break;
                case 'info_tidalmax_step3':
                    topLeft = true;
                    text = "The guidelines for maximum mean kinetic power density for economically viable energy production should be followed: less than 0.5 kW/m2 is poor, 0.5 - 1 kW/m2 is fair, 1-2 kW/m2 is good, 2-4 kW/m2 is excellent, and greater than 4 kW/m2 is outstanding  (Polagye pers.comm. 2012).";
                    break;
                case 'info_wavesummer_step3':
                    topLeft = true;
                    text = "The minimum wave energy density should be greater than 10 kW/m  for economically viable energy production  (Spaulding et al. 2010).";
                    break;
                case 'info_wavewinter_step3':
                    topLeft = true;
                    text = "The minimum wave energy density should be greater than 10 kW/m for economically viable energy production (Spaulding et al. 2010).";
                    break;
                case 'info_wind_step3':
                    topRight = true;
                    text = "The National Renewable Energy Laboratory (2011) recommends siting of offshore wind facilities in areas with a wind power class greater than 4 corresponding to a wind speed greater than 15.7 mph. Wind power class of 5 is excellent, 6 is superb, and 7 is outstanding.";
                    break;
                    
                //Step 3 Conservation Parameters
                case 'info_substrate_benthic_step3':
                    text = "Selection of substrate depends on the associated species of interest; for example, some groundfish or demersal species occur over hard bottom substrates, while open ocean or pelagic species can occur over soft bottom substrates.";
                    break;
                //case 'info_depth_class_step3':
                //    text = "Depth classes are adopted from (Greene et al. 2004). <p>Innershelf is defined as nearshore shallow from 0-40m; <p>Midshelf is defined as continental shelf, 40-200m; <p>Mesobenthal is defined as the upper continental shelf, 200-700m; and <p>Bathybenthal is defined as lower to toe of continental shelf, 700-3500m. ";
                //    break;
                case 'info_benthic_depth_class_step3':
                    text = "Depth classes are adopted from (Greene et al. 2004). <p></p>Innershelf is defined as nearshore shallow from 0-40m. <p></p>Midshelf is defined as continental shelf, 40-200m. <p></p>Mesobenthal is defined as the upper continental shelf, 200-700m. <p></p>Bathybenthal is defined as lower to toe of continental shelf, 700-3500m. <p></p>Selection of depth class depends on the associated species; for example, some demersal fish species such as rockfish can occur at bathybenthal depths, while pelagic fish species such as salmon can occur at inner- and mid-shelf depths.";
                    break;
                case 'info_geomorphology_step3':
                    text = "Selection of geomorphology depends on the associated species; for example, some coral species can occur in basins, while some sponges occur along slopes.";
                    break;
                case 'info_substrate_nearshore_step3':
                    text = "Selection of substrate depends on the associated species of interest; for example, rocky intertidal species occur over hard bottom substrates, while juvenile salmon and forage fish can occur over soft bottom substrates.";
                    break;
                case 'info_exposure_step3':
                    text = "Selection of wave energy or degree of shoreline exposure depends on the species of interest associated with nearshore exposure; for example, rocky intertidal species can occur in exposed or very exposed nearshore areas, while juvenile salmon and forage fish can occur in protected or very protected estuary areas.";
                    break;
                case 'info_ecosystem_step3':
                    text = "Selection of the ecosystem type depends on the species of interest associated with the vegetation community.";
                    break;
                case 'info_upwelling_step3':
                    text = "Selection of the upwelling type depends on the desired scenario outcome; high upwelling relates to high levels of chlorophyll production and primary productivity.";
                    break;
                case 'info_chlorophyll_step3':
                    text = "Selection of the chlorophyll type depends on the desired scenario outcome; high chlorophyll relates to high primary productivity";
                    break;
                default:
                    $(this).hide();
            }
            if (text!='none' && topMiddle) {
                $(this).qtip({
                    content: text, 
                    show: { 
                        delay: 0,
                        when: { event: 'mouseover' } 
                    },
                    position: {
                        corner: {
                            target: 'topMiddle',
                            tooltip: 'bottomMiddle'
                        }
                    },
                    hide: { when: {event: 'mouseleave'} },
                    style: { 
                        width: 320,
                        name: 'blue' 
                    }
                });
            } else if (text!='none' && topLeft) {
                $(this).qtip({
                    content: text, 
                    show: { 
                        delay: 0,
                        when: { event: 'mouseover' } 
                    },
                    position: {
                        corner: {
                            target: 'topRight',
                            tooltip: 'bottomRight'
                        }
                    },
                    hide: { when: {event: 'mouseleave'} },
                    style: { 
                        width: 270,
                        name: 'blue' 
                    }
                });
            } else if (text!='none' && topRight) {
                $(this).qtip({
                    content: text, 
                    show: { 
                        delay: 0,
                        when: { event: 'mouseover' } 
                    },
                    position: {
                        corner: {
                            target: 'topLeft',
                            tooltip: 'bottomLeft'
                        }
                    },
                    hide: { when: {event: 'mouseleave'} },
                    style: { 
                        width: 270,
                        name: 'blue' 
                    }
                });
            } else if (text!='none') {
                $(this).qtip({
                    content: text, 
                    show: { 
                        delay: 0,
                        when: { event: 'mouseover' } 
                    },
                    position: {
                        corner: {
                            target: 'rightMiddle',
                            tooltip: 'leftMiddle'
                        }
                    },
                    hide: { when: {event: 'mouseleave'} },
                    style: { 
                        width: 270,
                        name: 'blue' 
                    }
                });
            }
        });             
        
    });
    
    function toggleObjectives(obj_id, src_id) {
        $("#"+obj_id).fadeToggle(100); //slideToggle
        if ($("#"+src_id).text() == 'Show Objectives') { 
            $("#"+src_id).text('Hide Objectives'); 
        } else { 
            $("#"+src_id).text('Show Objectives'); 
        }
    };
    function toggleParams(param_id, src_id) {
        $("#"+param_id).fadeToggle(100); //slideToggle
        //$("#"+param_id).toggle();
        if ($("#"+src_id).text() == 'Show Parameters') { 
            $("#"+src_id).text('Hide Parameters'); 
        } else { 
            $("#"+src_id).text('Show Parameters'); 
        }
    };
    
</script>


{% if form.media %} {{ form.media }} {% endif %}
<h1>
    <img src="/media/wmm/img/multi.png"/>
    <small>New Scenario </small> 
</h1>

<form id="featureform" action="{{action}}" method="post"> 
  {% for hidden in form.hidden_fields %}
    <div style="display:none;">
        {{ hidden.errors }}
    </div>
    {{ hidden }}
  {% endfor %}
  <div id="error_bar"></div>
  
  <div class="step" id="step1">
    <p class="step-text"><i>Step 1 of 4 </i>
    <p class="instructions"> Choose one or more management objectives from the following categories: </p>
    <div id="objectives">
        <label class="step1-header">
            Renewable Energy
            <img src="/media/wmm/img/info.png" id="info_energy_objs" class="info"/>
        </label>
        <div id="energy_objectives" class="inputfield">
            {{ form.input_objectives_energy }} 
        </div>
        <label class="step1-header">
            Conservation
            <img src="/media/wmm/img/info.png" id="info_conservation_objs" class="info"/>    
        </label>
        <div id="conservation_objectives" class="inputfield">
            {{ form.input_objectives_conservation }} 
        </div>
    </div>
  </div>
    
  <!-- Should step2 be moved to a separate template populated via a server call? -->
  <div class="step" id="step2">
    <p class="step-text"><i>Step 2 of 4 </i>
    <p class="instructions"> Select 1 or more parameters from your chosen objective(s): </p>    
    <div id="step2_data">
        <!-- Renewable Energy Objectives-->
        <div id="tidal_energy_params_header">
            <label class="step2-header">
                Tidal Energy
            </label>
        </div>
        <div id="tidal_energy_params" class="inputfield">
            {{ form.input_parameters_tidal_energy }} 
        </div>
    
        <div id="wave_energy_params_header">
            <label class="step2-header">
                Wave Energy
            </label>
        </div>
        <div id="wave_energy_params" class="inputfield">
            {{ form.input_parameters_wave_energy }} 
        </div>
    
        <div id="wind_energy_params_header">
            <label class="step2-header">
                Wind Energy
            </label>
        </div>
        <div id="wind_energy_params" class="inputfield">
            {{ form.input_parameters_wind_energy }} 
        </div>
    
        <!-- Conservation Objectives -->
        <div id="offshore_conservation_params_header">
            <label class="step2-header">
                Benthic Conservation
            </label>
        </div>
        <div id="offshore_conservation_params" class="inputfield">
            {{ form.input_parameters_offshore_conservation }} 
        </div>
        
        <div id="nearshore_conservation_params_header">
            <label class="step2-header">
                Nearshore Conservation
            </label>
        </div>
        <div id="nearshore_conservation_params" class="inputfield">
            {{ form.input_parameters_nearshore_conservation }} 
        </div>
    
        <div id="pelagic_conservation_params_header">
            <label class="step2-header">
                Pelagic Conservation
            </label>
        </div>
        <div id="pelagic_conservation_params" class="inputfield">
            {{ form.input_parameters_pelagic_conservation }} 
        </div>
    
        <!--  can also use style="display: none" to hide the div contents -->
    </div>
  </div>

  <div class="step" id="step3">
    <p class="step-text"><i>Step 3 of 4 </i> </p>
    <p class="instructions">Provide suitable values for each of your chosen parameters: </p>
    <div id="step3_data">
        <!-- Tidal Energy -->
        <div id="tidal_energy_widgets_header">
            <label class="step3-header">
                Tidal Energy
                <small>[<a id="showWidgets_tidal_energy" href="javascript:toggleParams('tidal_energy_widgets', 'showWidgets_tidal_energy');">Hide Parameters</a>]:</small>
            </label>
            <div id="tidal_energy_widgets">
                <div id="distance_shore_tidal_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Shore (miles) 
                        {{ form.input_dist_shore_tidal_energy }}  </label>          
                    </div>
                </div>
                <div id="distance_port_tidal_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Port (miles) 
                        {{ form.input_dist_port_tidal_energy }}  </label>               
                    </div>
                </div>
                <div id="distance_astoria_tidal_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Deep Water Port of Astoria (miles) 
                        {{ form.input_dist_astoria_tidal_energy }}  </label>               
                    </div>
                </div>
                <div id="distance_hoquium_tidal_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Deep Water Port of Grays Harbor (miles) 
                        {{ form.input_dist_hoquium_tidal_energy }}  </label>               
                    </div>
                </div>
                <div id="depth_tidal_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Depth Range (feet) 
                        {{ form.input_min_depth_tidal_energy }}            
                        to
                        {{ form.input_max_depth_tidal_energy }}            

                        {{ form.input_depth_tidal_energy }}  </label>             
                    </div>
                </div>
                <div id="substrate_tidal_energy_widget" class="inputfield">
                    <label class="param">Substrate Types <img src="/media/wmm/img/info.png" id="info_tidal_substrate_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_substrate_tidal_energy }} 
                    </div>
                </div>
                <div id="tidalmean_tidal_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Mean Tidal Current (kW/m2) 
                        {{ form.input_min_tidalmean_tidal_energy }}            
                        to
                        {{ form.input_max_tidalmean_tidal_energy }}            

                        {{ form.input_tidalmean_tidal_energy }}  </label>          
                    </div>
                </div>
                <div id="tidalmax_tidal_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Max Tidal Current (kW/m2) 
                        {{ form.input_min_tidalmax_tidal_energy }}            
                        to
                        {{ form.input_max_tidalmax_tidal_energy }}            

                        {{ form.input_tidalmax_tidal_energy }}  </label>          
                    </div>
                </div>
            </div>
        </div>
                
        <!-- Wave Energy -->
        <div id="wave_energy_widgets_header">
            <label class="step3-header">
                Wave Energy
                <small>[<a id="showWidgets_wave" href="javascript:toggleParams('wave_energy_widgets', 'showWidgets_wave');">Hide Parameters</a>]:</small>
            </label>
            <div><p></p></div>
            <div id="wave_energy_widgets">
                <div id="distance_shore_wave_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Shore (miles)
                        {{ form.input_dist_shore_wave_energy }} </label>           
                    </div>
                </div>
                <div id="distance_port_wave_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Port (miles)
                        {{ form.input_dist_port_wave_energy }} </label>           
                    </div>
                </div>
                <div id="distance_astoria_wave_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Deep Water Port of Astoria (miles) 
                        {{ form.input_dist_astoria_wave_energy }}  </label>               
                    </div>
                </div>
                <div id="distance_hoquium_wave_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Deep Water Port of Grays Harbor (miles) 
                        {{ form.input_dist_hoquium_wave_energy }}  </label>               
                    </div>
                </div>
                <div id="depth_wave_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Depth Range (feet)
                        {{ form.input_min_depth_wave_energy }}            
                        to
                        {{ form.input_max_depth_wave_energy }}            

                        {{ form.input_depth_wave_energy }} </label>           
                    </div>
                </div>
                <div id="substrate_wave_energy_widget" class="inputfield">
                    <label class="param">Substrate Types <img src="/media/wmm/img/info.png" id="info_substrate_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_substrate_wave_energy }}
                    </div>
                </div>
                <div id="wavesummer_wave_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Summer Energy (kW/m of shoreline) 
                        {{ form.input_min_wavesummer_wave_energy }}            
                        to
                        {{ form.input_max_wavesummer_wave_energy }}            

                        {{ form.input_wavesummer_wave_energy }}  </label>         
                    </div>
                </div>
                <div id="wavewinter_wave_energy_widget" class="inputfield"> 
                    <div>
                        <label class="param">Winter Energy (kW/m of shoreline) 
                        {{ form.input_min_wavewinter_wave_energy }}            
                        to
                        {{ form.input_max_wavewinter_wave_energy }}            

                        {{ form.input_wavewinter_wave_energy }}  </label>      
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Wind Energy -->
        <div><p></p></div>
        <div id="wind_energy_widgets_header">
            <label class="step3-header">
                Wind Energy
                <small>[<a id="showWidgets_wind" href="javascript:toggleParams('wind_energy_widgets', 'showWidgets_wind');">Hide Parameters</a>]:</small>
            </label>
            <div><p></p></div>
            <div id="wind_energy_widgets">
                <div id="distance_shore_wind_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Shore (miles) 
                        {{ form.input_dist_shore_wind_energy }}  </label> 
                    </div>
                </div>
                <div id="distance_port_wind_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Port (miles) 
                        {{ form.input_dist_port_wind_energy }} </label> 
                    </div>
                </div>
                <div id="distance_astoria_wind_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Deep Water Port of Astoria (miles) 
                        {{ form.input_dist_astoria_wind_energy }}  </label>               
                    </div>
                </div>
                <div id="distance_hoquium_wind_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Distance to Deep Water Port of Grays Harbor (miles) 
                        {{ form.input_dist_hoquium_wind_energy }}  </label>               
                    </div>
                </div>
                <div id="depth_wind_energy_widget" class="inputfield">
                    <div>
                        <label class="param">Depth Range (feet) 
                        {{ form.input_min_depth_wind_energy }}            
                        to
                        {{ form.input_max_depth_wind_energy }}            
                        
                        {{ form.input_depth_wind_energy }} </label> 
                    </div>
                </div>
                <div id="substrate_wind_energy_widget" class="inputfield">
                    <label class="param">Substrate Types <img src="/media/wmm/img/info.png" id="info_substrate_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_substrate_wind_energy }}
                    </div>
                </div>
                <div id="wind_potential_wind_energy_widget" class="inputfield">
                    <label class="param">Wind Potential <img src="/media/wmm/img/info.png" id="info_wind_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_wind_potential_wind_energy }} 
                    </div>
                </div>
            </div>
        </div>
        

        <!-- Offshore Conservation -->
        <div id="offshore_conservation_widgets_header">
            <label class="step3-header">
                Benthic Conservation
                <small>[<a id="showWidgets_conservation" href="javascript:toggleParams('offshore_conservation_widgets', 'showWidgets_conservation');">Hide Parameters</a>]:</small>
            </label>
            <div id="offshore_conservation_widgets">
                <div id="substrate_offshore_conservation_widget" class="inputfield">
                    <label class="param">Substrate Types <img src="/media/wmm/img/info.png" id="info_substrate_benthic_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_substrate_offshore_conservation }} 
                    </div>
                </div>
                <div id="depth_class_offshore_conservation_widget" class="inputfield">
                    <label class="param">Depth Classes <img src="/media/wmm/img/info.png" id="info_benthic_depth_class_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_depth_class_offshore_conservation }} 
                    </div>
                </div>
                <div id="geomorphology_offshore_conservation_widget" class="inputfield">
                    <label class="param">Geomorphologies <img src="/media/wmm/img/info.png" id="info_geomorphology_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_geomorphology_offshore_conservation }} 
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Nearshore Conservation -->
        <div id="nearshore_conservation_widgets_header">
            <label class="step3-header">
                Nearshore Conservation
                <small>[<a id="showWidgets_nearshore_conservation" href="javascript:toggleParams('nearshore_conservation_widgets', 'showWidgets_nearshore_conservation');">Hide Parameters</a>]:</small>
            </label>
            <div id="nearshore_conservation_widgets">
                <div id="substrate_nearshore_conservation_widget" class="inputfield">
                    <label class="param">Substrate Types <img src="/media/wmm/img/info.png" id="info_substrate_nearshore_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_substrate_nearshore_conservation }} 
                    </div>
                </div>
                <div id="exposure_nearshore_conservation_widget" class="inputfield">
                    <label class="param">Exposure <img src="/media/wmm/img/info.png" id="info_exposure_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_exposure_nearshore_conservation }} 
                    </div>
                </div>
                <div id="ecosystem_nearshore_conservation_widget" class="inputfield">
                    <label class="param">Ecosystems <img src="/media/wmm/img/info.png" id="info_ecosystem_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_ecosystem_nearshore_conservation }} 
                    </div>
                </div>
            </div>
        </div>
            
        <!-- Pelagic (Water Column) Conservation -->
        <div id="pelagic_conservation_widgets_header">
            <label class="step3-header">
                Pelagic Conservation
                <small>[<a id="showWidgets_pelagic_conservation" href="javascript:toggleParams('pelagic_conservation_widgets', 'showWidgets_pelagic_conservation');">Hide Parameters</a>]:</small>
            </label>
            <div id="pelagic_conservation_widgets">
                <div id="upwelling_pelagic_conservation_widget" class="inputfield">
                    <label class="param">Upwelling <img src="/media/wmm/img/info.png" id="info_upwelling_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_upwelling_pelagic_conservation }} 
                    </div>
                </div>
                <div id="chlorophyl_pelagic_conservation_widget" class="inputfield">
                    <label class="param">Chlorophyll <img src="/media/wmm/img/info.png" id="info_chlorophyll_step3" class="info" /></label>
                    <div class="param-checkboxes">
                        {{ form.input_chlorophyl_pelagic_conservation }} 
                    </div>
                </div>
            </div>        
        </div>
        
    </div>
  </div>

<div class="step" id="step4">
    <p class="step-text"><i>Step 4 of 4 </i> </p>
    <p class="instructions">Provide a name to identify your scenario: </p>
    <div class="step4-header">
        {{ form.name.label_tag }}
        {{ form.name.errors }}
        {{ form.name }}            
    </div>
    <p class="instructions">Optionally, you may add a description and/or attach a file: </p>
    <div class="step4-header">
        {{ form.description.label_tag }}
        {{ form.description.errors }}
        {{ form.description }}            
    </div>
    <div class="step4-header">
        {{ form.support_file.label_tag }}
        {{ form.support_file.errors }} 
        {% if form.support_file.help_text %}
        {{ form.support_file.help_text }}           
        {% endif %}
        {{ form.support_file }}         
    </div>
</div>

<p><input type="submit" value="submit"></p>
</form>


<div class="wizard_nav" style="width:100%">
    <a href="#" class="button" style="float:left;" onclick="this.blur(); return false;" id="button_prev"><span>&lt; Previous</span></a>
    <a href="#" class="button" style="float:right;" onclick="this.blur(); return false;" id="button_next"><span>Next &gt;</span></a>
</div>

<div>
    <a href="#" class="cancel_button button red" onclick="this.blur(); return false;"><span>Cancel</span></a>
    <a href="#" class="submit_button button" onclick="this.blur(); return false;" id="button_submit"><span>Submit</span></a>
</div>

<style type="text/css">

div .field > label { font-size: 12px; display: inline; }
div .step { 
    -moz-box-shadow: 5px 5px 5px #ddd;
    -webkit-box-shadow: 5px 5px 5px #ddd;
    box-shadow: 5px 5px 5px #ddd; 
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    border: 1px #ddd solid;
    padding: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
    background-color: white; 
    background-repeat: no-repeat;
    min-height: 54px;
}
span.form-image { float: left; margin-left: -66px; }
span.form-image > img { width:46px; height:46px; }


label {
    clear: both;
    color: #344E63;
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 0;
    text-shadow: 0 1px 0 #FCFAFF;
}
p.step-text {
    margin: 0px;
    text-align:left;
}
p.instructions {
    margin: 0px; 
    margin-top: 10px;
    margin-bottom: 0px;
    text-align: left;
    color: #47556C;
    font-size: 14px;
    font-weight: normal;
    font-family: sans-serif;
}
form ul {
    margin-top: 5px;
    margin-bottom: 0px;
    padding-left: 40px;
}
form ul li {
    padding-left: 15px !important;
}
li label {   
    font-weight: normal !important;
    margin-bottom: 0px !important;
}
label.step1-header {
    font-weight: bold;
    padding-left: 15px !important;
}
label.step2-header {
    font-weight: bold;
    padding-left: 15px !important;
}
label.step3-header {
    font-weight: bold;
    padding-left: 15px !important;
    padding-bottom: 10px !important;
}
div.step4-header {
    font-weight: bold;
}
label.param {
    font-weight: normal !important;
    padding-left: 30px !important;
}
div.param-checkboxes {
    padding-left: 10px !important;
}
div.inputfield {
    padding-bottom: 10px !important;
}
img.info {
    display: inline !important;
}
<!-- might remove the following and keep jquery-widgets.css...had some trouble getting this code to catch on its own -->
.slidervalue { 
    width: 40px !important;
}
.ui-slider { 
    position:relative; 
    text-align:left; 
    left:15px; 
}

</style>

{% endblock %}
